<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <link rel="stylesheet" href="http://www.openglobus.org/og.css" type="text/css" />
    <script src="http://www.openglobus.org/og.js"></script>
    <script src="./jquery/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="./jquery/jquery-ui-1.7.2.custom.css">
    <script src="./jquery/jquery-ui-1.10.4.min.js"></script>
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script>

        var layers = 'examples:countries',
            layerUrl = 'http://openglobus.org/geoserver/examples/';

        var ne = new og.layer.WMS("Natural Earth", {
            visibility: true,
            isBaseLayer: true,
            url: layerUrl,
            layers: layers,
            version: '1.1.1',
            opacity: 1.0,
            specular: [0.001, 0.00046, 0.0003],
            shininess: 15,
            ambient: [0.1, 0.1, 0.2]
        });

        var globus = new og.Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new og.terrain.EmptyTerrain(),
            "layers": [ne]
        });

        ne.events.on("lclick", function (e) {
            var ll = globus.planet.getLonLatFromPixelEllipsoid(e);

            var lat = ll.lat,
                lon = ll.lon;

            var parameters = {
                'service': 'WMS',
                'version': '1.1.1',
                'request': 'GetFeatureInfo',
                'layers': layers,
                'query_layers': layers,
                'feature_count': 10,
                'info_format': 'text/javascript',
                'format_options': 'callback:handleJson',
                'SrsName': 'EPSG:4326',
                'width': 101,
                'height': 101,
                'x': 50,
                'y': 50,
                'bbox': (lon - 0.1) + ',' + (lat - 0.1) + ',' + (lon + 0.1) + ',' + (lat + 0.1)
            };

            var paramUrl = "";

            for (var p in parameters) {
                paramUrl += '&' + p + '=' + parameters[p];
            }

            var url = layerUrl + 'wms?' + paramUrl;

            $.ajax({
                url: url,
                dataType: 'jsonp',
                success: function (data) {
                    handleJson(data)
                }
            })
        });

        function handleJson(data) {
            console.log(data);
        };

    </script>
</body>

</html>